import React from "react";
import type business from "@/types/business";
import type { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'
// 自己封装的地区组件
import AreaPicker from '@/components/Area/AreaPicker';
import type { PickerValue } from 'antd-mobile/es/components/picker-view'

const Profile = () => {
    const [business] = useState<business>(React.business);

    const [form] = React.UI.Form.useForm();
    const [avatar, SetAvatar] = useState<ImageUploadItem[]>([
        {
            url: business.avatar_cdn as string
        }
    ]);
    const [AreaShow, SetAreaShow] = React.useState<boolean>(false);
    const [AreaActive] = useState<string[]>([business.province, business.city, business.district] as string[]);

    const OnSubmit = async (values: business) => {

        values.id = business.id;
        if (values.password) {
            delete values.password; // 删除密码
        }

        if (business.avatar) {
            values.avatar = business.avatar; // 头像
        }

        delete values.region_text; // 删除地区文本

        if (!values.password) {
            delete values.password;
        }

        const result = await React.Http.upload('/business/profile', values);

        if (result.code === 1) {
            React.success('修改成功', () => {
                React.business = result.data;
                React.Cookies.save('business', result.data, { path: '/' });
                React.navigate('/business');
            });
        } else {
            React.fail(result.msg);
        }
    }

    // 头像上传
    const OnUploadAvatar = async (file: File) => {
        // 赋值
        business.avatar = file;

        return {
            url: URL.createObjectURL(file)
        }
    }

    // 删除头像
    const OnAvatarDel = () => {
        business.avatar = '';
        SetAvatar([]);
    }

    const OnAreaConfirm = (values: PickerValue[], name: PickerValue[]) => {
        const [province, city, district] = name;

        const RegionText = [];

        if (province) {
            RegionText.push(province);
        }

        if (city) {
            RegionText.push(city);
        }

        if (district) {
            RegionText.push(district);
        }

        // 更新表单的省市区
        form.setFieldsValue({
            region_text: RegionText.join('-'),
            code: values[2] ? values[2] : (values[1] ? values[1] : values[0])
        })
    }

    return (
        <>
            {/* 地区组件 */}
            <AreaPicker visible={AreaShow} active={AreaActive} onClose={() => SetAreaShow(false)} onConfirm={OnAreaConfirm} />

            {/* 表单结构 */}
            <React.UI.Form
                name="profile"
                layout='horizontal'
                mode='card'
                form={form}
                onFinish={OnSubmit}
                footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
            >
                <React.UI.AutoCenter style={{ margin: '30px 0px' }}>
                    <React.UI.ImageUploader value={avatar} maxCount={1} onChange={SetAvatar} upload={OnUploadAvatar} onDelete={OnAvatarDel} />
                </React.UI.AutoCenter>

                <React.UI.Form.Item name="nickname" initialValue={business.nickname ?? ''} label="昵称" rules={[{ required: true }]}>
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="mobile" initialValue={business.mobile ?? ''} label="手机号" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                    <React.UI.Input placeholder="请输入手机号" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="password" initialValue={business.password ?? ''} label="密码">
                    <React.UI.Input type="password" placeholder="请输入密码" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="email" label="邮箱" initialValue={business.email ?? ''} rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
                    <React.UI.Input placeholder="请输入邮箱" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="gender" initialValue={business.gender} label="性别" rules={[{ required: true }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

                <React.UI.Form.Item name='region_text' rules={[{ required: true }]} initialValue={business.region_text ?? ''} label="地区" onClick={() => SetAreaShow(true)}>
                    <React.UI.Input placeholder="请选择地区" readOnly />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="code"
                    label="地区码"
                    hidden={true}
                    initialValue={business.code ?? ''}
                >
                    <React.UI.Input placeholder="地区码" readOnly />
                </React.UI.Form.Item>
            </React.UI.Form>
        </>
    )
}

export default Profile;